<template>
  <div>
    <v-dialog v-model="isShowLoginForm" persistent max-width="320">
      <v-card height="350">
        <v-tabs background-color="accent-4" center-active centered dark>
          <v-tab>登录</v-tab>
          <v-tab>注册</v-tab>
          <v-tab-item class="pt-10">
            <v-form
              class="pa-4"
              ref="loginForm"
              v-model="valid"
              @submit.prevent="login"
            >
              <v-text-field
                v-model="loginModel.username"
                :rules="usernameRules"
                label="用户名"
                required
              ></v-text-field>
              <v-text-field
                v-model="loginModel.password"
                :rules="passwordRules"
                label="密码"
                type="password"
                required
                autocomplete="new-password"
              ></v-text-field>
              <v-row class="mt-8">
                <v-spacer />
                <v-btn class="accent-4 mr-4" @click="cancelLogin">取消</v-btn>
                <v-btn class="accent-4 mr-4" type="submit">登录</v-btn>
              </v-row>
            </v-form>
          </v-tab-item>
          <v-tab-item>
            <v-form
              class="pa-4"
              ref="regForm"
              v-model="valid"
              @submit.prevent="register"
            >
              <v-text-field
                v-model="regModel.regData.username"
                :rules="usernameRules"
                label="用户名"
              ></v-text-field>
              <v-text-field
                v-model="regModel.regData.password"
                :rules="passwordRules"
                label="密码"
                type="password"
              ></v-text-field>
              <v-text-field
                v-model="regModel.password1"
                :rules="passwordRules"
                label="确认密码"
                type="password"
              ></v-text-field>
              <v-row class="mt-6">
                <v-spacer />
                <v-btn class="accent-4 mr-4" @click="cancelReg">取消</v-btn>
                <v-btn class="accent-4 mr-4" type="submit">注册</v-btn>
              </v-row>
            </v-form>
          </v-tab-item>
        </v-tabs>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  props: {
    isShowLoginForm: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      valid: true,
      loginModel: {
        username: '',
        password: '',
      },
      regModel: {
        regData:{
          username: '',
          password: '',
        },
        password1: '',
      },
      usernameRules: [
        (v) => !!v || '用户名不能为空',
        (v) => (v && v.length <= 8) || '用户名长度不能大于8',
      ],
      passwordRules: [
        (v) => !!v || '密码不能为空',
        (v) => (v && v.length <= 15 && v.length >= 6) || '密码长度在6至15之间',
      ],
    }
  },

  methods: {
    async login() {
      const valid = await this.$refs.loginForm.validate()
      if (valid) {
        const { data: res } = await this.$auth
          .loginWith('local', {
            data: this.loginModel,
          })
          .catch((e) => e)
        if (res && res.state.status === 201) {
          this.$toast.success('登录成功')
          this.$emit('changLoginShow', false)
          return
        } else {
          this.$toast.error('登录失败')
        }
      }
      this.$refs.loginForm.reset()
      this.$emit('changLoginShow', false)
    },
    async register() {
      if (this.regModel.regData.password !== this.regModel.password1) {
        return this.$toast.error('两次密码不一致,请重新输入')
      }
      const valid = await this.$refs.regForm.validate()
      if (valid) {
        const res = await this.$axios.$post('/auth/register', this.regModel.regData )
        console.log(res)
        if (res && res.status === 201) {
          this.$toast.success('注册成功')
          this.$auth.loginWith('local', {
            data: this.regModel.regData
          })
          this.$refs.regForm.reset()
          this.$emit('changLoginShow', false)
          return
        } else {
          this.$toast.error('注册失败')
        }
      }
      this.$refs.regForm.reset()
      this.$emit('changLoginShow', false)
    },
    cancelLogin() {
      this.$refs.loginForm.reset()
      this.$emit('changLoginShow', false)
    },
    cancelReg() {
      this.$refs.regForm.reset()
      this.$emit('changLoginShow', false)
    },
  },
}
</script>

<style></style>
